<template>
  <div class="execution">
    <basic-container>
      <avue-crud ref="crud"
                 :page="page"
                 :data="tableData"
                 :permission="permissionList"
                 :table-loading="tableLoading"
                 :option="tableOption"
                 @on-load="getList"
                 @search-change="searchChange"
                 @refresh-change="refreshChange"
                 @row-update="handleUpdate"
                 @row-save="handleSave"
                 @row-del="rowDel">
              <template slot-scope="scope" slot="menu">
                <el-button icon="el-icon-check"
                  class="getbtn"
                  type="text"
                  plain size="small"
                  @click.stop="handleGetdata(scope.row,scope.index)"
                  >详情</el-button>
              </template>
      </avue-crud>
      <div class="mask" v-if="isShow" @click.self="maskShow">
          <div>
            <avue-crud
              :data="tabData"
              :option="option"
            ></avue-crud>
          </div>
        </div>
    </basic-container>
  </div>
</template>

<script>
import {
  fetchList,
  getObj,
  addObj,
  putObj,
  delObj,
  tabObj
} from "@/api/insurance/repay";
import { tableOption,option } from "@/const/crud/insurance/repay";
import { mapGetters } from "vuex";

export default {
  name: "repay",
  data() {
    return {
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      option:option,
      tabData:[],
      isShow: false,
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.insurance_repay_add, false),
        delBtn: this.vaildData(this.permissions.insurance_repay_del, false),
        editBtn: this.vaildData(this.permissions.insurance_repay_edit, false)
      };
    }
  },
  methods: {
    getList(page, params) {
      this.tableLoading = true;
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      )
        .then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    rowDel: function(row, index) {
      var _this = this;
      this.$confirm("是否确认删除ID为" + row.id, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return delObj(row.id);
        })
        .then(data => {
          _this.$message.success("删除成功");
          this.getList(this.page);
        });
    },
    handleUpdate: function(row, index, done, loading) {
      putObj(row)
        .then(data => {
          this.$message.success("修改成功");
          done();
          this.getList(this.page);
        })
        .catch(() => {
          loading();
        });
    },
    handleSave: function(row, done, loading) {
      addObj(row)
        .then(data => {
          this.$message.success("添加成功");
          done();
          this.getList(this.page);
        })
        .catch(() => {
          loading();
        });
    },
    searchChange(form) {
      this.searchForm = form;
      this.getList(this.page, form);
    },
    refreshChange() {
      this.getList(this.page);
    },
    handleGetdata(row, index) {
      tabObj({ repayId: row.id })
        .then(data => {
          this.tabData = data.data
          console.log(data,"data");
          
          this.isShow = true
        })
        .catch(() => {
        });
    },
    maskShow() {
      this.isShow = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  & > div {
    width: 66%;
    background: #fff;
    padding: 20px;
    overflow: hidden;
    max-height: 80%;
    overflow-y: scroll;
    line-height: 30px;
    & > div {
      display: flex;
      justify-content: space-around;
      & > div {
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        .el-input {
          width: 66%;
        }
        & > div {
          width: 66%;
        }
      }
    }
  }
  & > div::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}
}
</style>

